<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myself</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <!-- 引入外部日期的css -->
    <link rel="stylesheet" href="./datepicker/skin/WdatePicker.css">
    <style>
        .wrap {
            width: 85%;
            margin: 0 auto;
        }
        
        #template {
            display: none;
        }
        
        #mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.5;
            display: none;
        }
        
        #pop {
            padding: 50px;
            width: 600px;
            background-color: white;
            border-radius: 10px;
            position: fixed;
            top: 50%;
            left: 50%;
            /* 自身位移自身的百分之50 */
            transform: translate(-50%, -50%);
            display: none;
        }
        
        #pop h2 {
            margin-bottom: 20px;
        }
        
        select {
            margin-top: 5px;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <hr>
        <button class="btn btn-danger" id="addStudent" style="float: right;">+新增学生+</button>

        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-wrap">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinDate"></td>
                    <td>
                        <button class="btn btn-danger data-edit">编辑</button>
                        <button class="btn btn-primary data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 遮罩 -->
    <div id="mask"></div>
    <div id="pop">
        <h2>添加学生</h2>


        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="学生年龄">
                </div>
            </div>


            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" checked > 男
                  </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-female" > 女
                  </label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <!-- type="date"系统自带的日期选择,一半用于移动端 -->
                    <input type="input" class="form-control" id="data-joinDate" placeholder="入学日期">
                </div>

            </div>
            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>



        </div>

    </div>

    <script src="jquery.min.js"></script>
    <script src="./sanji.js"></script>
    <!-- 引入外部日期的js -->
    <script src="./datepicker/WdatePicker.js"></script>
    <script>
        let address = "http://10.35.170.145:8080";
        let template = $("#template");
        // console.log(template)

        //删除
        template.find(".data-delete").click(function() {
                //找到他爹tr
                let nowItem = $(this).closest("tr");
                //提示点击.值默认不写为1
                if (confirm(`真的要删除${nowItem.find(".data-name").html()}同学吗?此项操作不可逆哦!`) == 1) {

                    $.ajax({
                        url: `${address}/deleteStudent`,
                        data: {
                            id: $(this).closest("tr").find(".data-id").html() //发送至后台的数据id
                        },
                        //前端获取到后端返回的数据
                        success(data) {
                            if (data === "success") {
                                //这是删除页面中的一行
                                nowItem.fadeOut();
                            } else {
                                alert("删除失败")
                            }
                        }
                    })

                }
            })
            //引入日期JS
        $("#data-joinDate").click(function() {
                WdatePicker()
            })
            // console.log(template);
            //打开就直接发送数据
        $.ajax({
                url: `${address}/getstudentList`,
                success(data) {
                    //返回的直接是json对象
                    // console.log(data)  
                    // 然后将他枚举
                    data.forEach(item => {
                        //因为template.clone(true)不关心返回值,所以可以直接在后面将其属性id设置为空
                        let newItem = template.clone(true).attr("id", "");
                        //id
                        newItem.find(".data-id").html(item.id);
                        //name
                        newItem.find(".data-name").html(item.name);
                        //age
                        newItem.find(".data-age").html(item.age);
                        //sex
                        newItem.find(".data-sex").html(item.sex == 1 ? "男" : "女");
                        //city
                        newItem.find(".data-city").html(item.city);
                        //join-data
                        newItem.find(".data-joinDate").html(item.joinDate);
                        //可以直接获取并添加
                        $("tbody").append(newItem);
                    })
                }
            })
            //jq弹出层
        $("#addStudent").click(function() {
            $("#mask").fadeIn();
            $("#pop").fadeIn();
            //获得焦点事件.鼠标闪烁
            $("#data-name").focus()

        })
        $("#cancel").click(function() {
            $("#mask").fadeOut("fast"); //快速的,其实差不多
            $("#pop").fadeOut();

        })

        //回车与esc事件同提交与取消
        window.onkeydown = function(event) {
            if (event.keyCode === 13) {
                $("#submit").click();
            }
            // console.log(event.keyCode);//查看键盘码数
            if (event.keyCode === 27) {
                $("#cancel").click();
            }
        }

        //弹出层添加请求
        $("#submit").click(function() {
            //双&与单&的区别?
            //单&没有效果

            //&　不管前面的条件是否正确，后面都执行
            // &&　前面条件正确时，才执行后面，不正确时，就不执行，就效率而言，这个更好(&&又叫短路运算符)
            if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")) {
                $.ajax({
                    url: `${address}/addStudent`,
                    //发送前端参数
                    data: {
                        name: $("#data-name").val(),
                        age: $("#data-age").val(),
                        //判断#data-female的checked属性,jq对象是没有check属性的,只好[0]转成js对象
                        //返回值是true,则为0,否则为1
                        sex: $("#data-female")[0].checked ? 0 : 1,
                        city: $("#province").val() + $("#city").val() + $("#area").val(),
                        joinDate: $("#data-joinDate").val(),
                    },
                    success(data) {
                        if (data === "success") {
                            history.go(0)
                        } else {
                            alert("添加失败")
                        }
                    }
                })
            }
        })
    </script>
</body>

</html>